<!--
    历史记录
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.boxLeft
        UserUnit
        Personage
      div.boxRight
        h1 历史记录
        div.center
          span.kecheng-span(v-for="(item, index) in collect" @click="isName(item,index)"  :class="index === isIndex?'Greens':''") {{item.title }}
        div.kecheng-son
          ul
            li.kecheng-li(v-if="isIndex===0" v-for="(item, index) in open")
              router-link(:to="{name: 'VideoPage',query:{videoId:111}}")
                div.kecheng-img
                  img(:src="item.img")
                  p {{item.name}}
            li.kecheng-li(v-if="isIndex===1"  v-for="(item, index) in boutique")
              router-link(:to="{name: 'VideoPage',query:{videoId:111}}")
                div.kecheng-img
                  img(:src="item.img")
                  p {{item.name}}
            li.kecheng-li(v-if="isIndex===2"  v-for="(item, index) in tiny")
              router-link(:to="{name: 'VideoPage',query:{videoId:111}}")
                div.kecheng-img
                  img(:src="item.img")
                  p {{item.name}}
            li.kecheng-li(v-if="isIndex===3"  v-for="(item, index) in liveClass")
              router-link(:to="{name: 'VideoPage',query:{videoId:111}}")
                div.kecheng-img
                  img(:src="item.img")
                  p {{item.name}}
            li.kecheng-li(v-if="isIndex===4"  v-for="(item, index) in private")
              router-link(:to="{name: 'VideoPage',query:{videoId:111}}")
                div.kecheng-img
                  img(:src="item.img")
                  p {{item.name}}
    div.clearfix
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'History',
    data() {
      return {
        collect: [
          {title: '公开课'},
          {title: '精品课'},
          {title: '微课'},
          {title: '直播课'},
          {title: '私播课'}
        ],
        open: [
          {img: '/static/myCollect/u4578.png', name: '公开课'},
          {img: '/static/myCollect/u4583.png', name: '微课'}
        ],
        boutique: [
          {img: '/static/myCollect/u4406.png', name: '阳老师'},
          {img: '/static/myCollect/u4406.png', name: '李老师'}
        ],
        tiny: [
          {img: '/static/myCollect/u4588.png', name: '阳老师'},
          {img: '/static/myCollect/u4588.png', name: '李老师'}
        ],
        liveClass: [
          {img: '/static/myCollect/u4578.png', name: '阳老师'},
          {img: '/static/myCollect/u4578.png', name: '李老师'}
        ],
        private: [
          {img: '/static/myCollect/u4578.png', name: '阳老师'},
          {img: '/static/myCollect/u4578.png', name: '李老师'}
        ],
        isIndex: 0
      }
    },
    methods: {
      isName(item, index) {
        this.isIndex = index
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0
  .box
    width 1200px
    margin 5px auto
  h1
    font-size 20px
    color #FF9933

  .center
    margin-top 36px
    margin-bottom 26px

  .kecheng-span
    font-size 18px
    margin-right 40px
    color #666
    cursor pointer

  .Greens
    color #008F95
    font-weight 700

  .kecheng-son ul
    display flex
    flex-wrap wrap
    /*justify-content space-around*/
    align-items flex-start

  .kecheng-li
    margin-right 26px

  .kecheng-img
    width 100px
    height 140px

  .kecheng-img img
    width 100px
    height 100px

  .kecheng-img p
    display block
    width 100px
    height 40px
    line-height 40px
    text-align center

  .boxRight
    width 926px
    height 1471px
    border 1px solid #ccc
    border-radius 5px
    float right
    padding 20px 20px 0 24px
    box-sizing border-box

  .boxLeft
    width 247px
    height 1471px
    float left

  .boxLeftBottom
    width 247px
    height 1140px
    .personage
      display block
      width 247px
      height 60px
      line-height 60px
      text-align center
      border 1px solid #ccc
      background-color #F2F2F2
      cursor pointer
      position relative
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      .icon
        position absolute
        width 20px
        height 20px
        top 1px
        left 56px
        font-size 22px
        color #333333
    .listBorder
      border none
      border-left 4px solid #FF9933
      background-color #fff
      span
        color #FF9933!important
    .text
      color #666666
      font-size 18px

</style>
